<script setup>
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";
import Footer from "@/components/Footer.vue";
</script>

<template>
  <div>
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside class="my-el-aside" width="200px">
        <Aside></Aside>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header class="my-el-header">
          <Header></Header>
        </el-header>
        <!-- 中心内容 -->
        <el-main class="my-el-main">
          <!-- 在这里使用路由表 -->
          <router-view></router-view>
        </el-main>
        <!-- 脚注 -->
        <el-footer class="my-el-footer">
          <Footer></Footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.my-el-aside{
  background-color: #d9ecff;
  height: 100vh;
}
.my-el-main{
  background-color: #ecf5ff;
}
.my-el-header{
  background-color: #c6e2ff;
  /* 增大头部高度 */
  height: 100px;
}
.my-el-footer{
  background-color: #c6e2ff;
  /* 增大尾部高度 */
  height: 100px;
}
</style>